<template>
	<view class="f-page">
    <u-gap height="10"></u-gap>
    <u-search placeholder="搜索食物" v-model="listQuery.searchValue" clearabled :show-action="false" @clickIcon="click" @search="click"></u-search>
    <u-gap height="10"></u-gap>
    <u-index-list :index-list="indexList">
		<template v-for="(item, index) in itemArr" >
			<!-- #ifdef APP-NVUE -->
			<u-index-anchor :text="indexList[index]" :key="index"></u-index-anchor>
			<!-- #endif -->
			<u-index-item  :key="index">
				<!-- #ifndef APP-NVUE -->
				<u-index-anchor :text="nameList[index]"></u-index-anchor>
				<!-- #endif -->
				<view class="list-cell" v-for="(cell, index2) in item" :key="index2">
          <u--text type="primary" :text="cell.name"></u--text>
          <u--text type="success" :text="cell.gi"></u--text>
				</view>
			</u-index-item>
		</template>
	</u-index-list>

	</view>
</template>


<script>
import { foodGiList } from '@/api/healthy'
	export default {
		data() {
			return {
        listQuery: {searchValue: ''},
        indexList: [],
				itemArr: [],
        nameList: []
			}
		},
    created(){
     this.getList()
    },
		methods: {
      click() {
        if(this.listQuery.searchValue === ''){
          // return
        }
        this.getList()
      },
      getList(){
        foodGiList({params: this.listQuery,custom: { auth: false,toast: false }}).then(response => {
          this.indexList = response.data.indexList
          this.itemArr = response.data.itemArr
          this.nameList = response.data.nameList
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
</style>
